<!-- 部门树 -->
<template>
  <div overflow-auto-y>
    <div pt-24px pb-24px pl-35px pr-25px>
      <el-input v-model="deptName" placeholder="搜索部门名称关键词" clearable>
        <template #append>
          <el-button icon="search" />
        </template>
      </el-input>
    </div>

    <el-tree
      ref="deptTreeRef"
      icon="arrowRightBold"
      pt-10px
      pb-10px
      pl-10px
      pr-15px
      :data="deptList"
      :props="{ children: 'children', label: 'name', disabled: '' }"
      :expand-on-click-node="false"
      :filter-node-method="handleFilter"
      :default-expand-all="false"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script setup lang="ts">
import DeptAPI from "@/api/system/dept.api";
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: undefined,
  },
});

const deptList = ref<OptionType[]>(); // 部门列表
const deptTreeRef = ref(); // 部门树
const deptName = ref(); // 部门名称

const emits = defineEmits(["node-click", "update:modelValue"]);

const deptId = useVModel(props, "modelValue", emits);

watchEffect(
  () => {
    deptTreeRef.value.filter(deptName.value);
  },
  {
    flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
  }
);

/**
 * 部门筛选
 */
function handleFilter(value: string, data: any) {
  if (!value) {
    return true;
  }
  return data.name.indexOf(value) !== -1;
}

/** 部门树节点 Click */
function handleNodeClick(data: { [key: string]: any }) {
  console.log(data, "222222");
  deptId.value = data.id;
  emits("node-click");
}

onBeforeMount(() => {
  DeptAPI.getOptions().then((data) => {
    deptList.value = data;
  });
});
</script>
